<script setup lang="ts">
import { useAttrs } from 'vue'

const attrs = useAttrs()
console.log('useAttrs案例 -->', attrs)
</script>

<template>
  <div>
    <div>import { useAttrs } from 'vue'</div>
    <div>const attrs = useAttrs()</div>

    子组件可以直接获取所有获取所有属性+事件（返回的是一个proxy）。
    属性：可以直接在模板中使用$attrs.xxx来显示xxx属性
    事件：组件绑定@xxx="yyy"，接收到$attrs.onXxx:函数体
    注意defineProps、defineEmits优先级高。例如：如果使用了defineProps(['a'])，则useAttrs获取到的属性中会被去掉a属性
  </div>
  <hr />
  <div>
    useAttrs()返回值也可以直接用于模板，如下表示：将attrs获取的属性+事件全部传入组件el-button。例如：
    type="success" + @click="handleTap" 都注入了el-button中
    <el-button :="attrs">按钮</el-button>
  </div>
</template>

<style scoped></style>
